{%extends 'layout.admin.html'%}
{%block content%}
{% load authfilters %}

<div class="page-body">
    <div class="container-xl">

        <div class="row row-cards">
            <div class="col-12">
                <form class="card" name="email-form" id="email-form">
                    <div class="card-header">
                        <h4 class="card-title">Contact</h4>
                    </div>
                    <div class="card-body">
                        <div class="row g-5">
                            <div class="col-xl-4">
                                <h4>Contact Creator</h4>
                                <span>Use the form below to contact the administrators of this site directly. Please allow up to 48 hours for a response.</span>
                            </div>
                            <div class="col-xl-2">
                            </div>
                            <div class="col-xl-5">
                                <div class="row">
                                    <div class="col-md-6 col-xl-12">
                                        <div class="mb-3">
                                            <label class="form-label">Your Email Address:</label>
                                            <input type="email" class="form-control" placeholder="Email" name="email" required>
                                        </div>

                                        <div class="mb-3">
                                            <label class="form-label">Full Name:</label>
                                            <input type="text" class="form-control" placeholder="Full Name" name="name" required>
                                        </div>

                                         <div class="mb-3">
                                            <label class="form-label">Your Message:</label>
                                            <textarea class="form-control" rows="6" placeholder="Content.." name="message" required></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <button type="submit" class="btn btn-primary btn-2" alt="Send Message">Send Message</button>
                                        </div>
 
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>

                </form>
            </div>
        </div>
    </div>
</div>
 
<script type='text/javascript'>
    $(document).ready(function() {
        $('#email-form').on('submit', function() {
            var $button = $(this).find('[type="submit"]');
            $button.attr('disabled', 'disabled');
            $button.text('Sending...');

            var params = {
                'email': $(this).find('[name="email"]').val(),
                'name': $(this).find('[name="name"]').val(),
                'message': $(this).find('[name="message"]').val(),
            }

            $.post('/contact-submit', params, function(data) {
                if (data.status == 200) { 
                    $button.text('Send Message Successly!');
                    window.setTimeout(function() {
                        $button.text($button.attr('alt'));
                        $button.removeAttr('disabled');
                    }, 15000);
                }
            });
            return false;
        });
    });
    
</script>
{%endblock%}
